$(function () {
    //放大镜
    //中区域=(大区域/大图)*中图
    let $MiddleAreaWidth = ($(".bigArea").width() / $(".bigImg").width()) * $(".middleImg").width() + "px";
    let $MiddleAreaHeight = ($(".bigArea").height() / $(".bigImg").height()) * $(".middleImg").height() + "px";
    // console.log($MiddleAreaWidth);
    // console.log($MiddleAreaHeight);

    //进入goods-img，大区域和中区域都要显示
    $(".goods-img").on("mouseenter", function () {
        $(".middleArea").show();
        $(".bigArea").show();
        //计算比例= 大区域/中区域
        let $score = $(".bigArea").width() / $(".middleArea").width();
        // console.log($score);
        //中区域绑定给鼠标移动
        $(".middleArea").on("mousemove", function (e) {
            var mX = e.pageX - $(".middleImg").offset().left - $(".middleArea").width() / 2;
            var mY = e.pageY - $(".middleImg").offset().top - $(".middleArea").height() / 2;
            // console.log(mX);
            // console.log(mY);
            if (mX < 0) {
                mX = 0;
            }
            if (mY < 0) {
                mY = 0;
            }
            if (mX >= $(".middleImg").width() - $(".middleArea").width()) {
                mX = $(".middleImg").width() - $(".middleArea").width();
            }
            if (mY >= $(".middleImg").height() - $(".middleArea").height()) {
                mY = $(".middleImg").height() - $(".middleArea").height();
            }

            //中区域移动
            $(".middleArea").css("left", mX + "px");
            $(".middleArea").css("top", mY + "px");

            //大图反向移动
            $(".bigImg").css("left", $score * mX * -1 + "px");
            $(".bigImg").css("top", $score * mY * -1 + "px");

        })
    })

    //离开goods-img，大区域和中区域都要隐藏
    $(".goods-img").on("mouseleave", function () {
        $(".middleArea").hide();
        $(".bigArea").hide();
    })
    //进入小图区域，大区域和中区域都要隐藏
    $(".small").on("mouseenter", function () {
        $(".middleArea").hide();
        $(".bigArea").hide();
    })

    //点击小图 中图切换为对应图片
    Array.from($(".small").find("li")).forEach((el, index) => {
        $(el).on("click", function () {
            $(".middleImg>img").attr("src", `images/loupe-middle/middle_${index + 1}.jpg`)
            $(".bigImg").attr("src", `images/loupe-big/big_${index + 1}.jpg`)
            $(el).addClass("active").siblings().removeClass();
        })

    })

    //商品收藏?
    let timer_colltect = setInterval(() => {
        $(".left-info>a").click(function () {
            $(".goods-collect").show();
        })
    }, 10);
    $(".goods-collect").hide();

    //会员规则
    $(".member-rules").on("mouseenter", function () {
        $(".tabmenu").show();
    })
    $(".member-rules").on("mouseleave", function () {
        $(".tabmenu").hide();
    })

    //颜色选择模块  点击小图中区域的图片和大区域的图片都要换成对应的
    Array.from($(".attr-choice").find("li")).forEach((el, index) => {
        $(el).on("click", function () {
            //添加类名
            $(this).addClass("active").siblings().removeClass("active");

            //当前对勾图片 $(tipe)
            let tipe = $(this).children().eq(1);
            // console.log(tipe);
            //其他对勾图片
            let otherImg = $(".attr-choice li").eq(index).siblings().find(".tipe");
            // console.log(otherImg);
            tipe.show();
            otherImg.hide();

            //点击小图中区域的图片和大区域的图片都要换成对应的
            $(".middleImg>img").attr("src", `images/loupe-middle/middle_${index + 1}.jpg`)
            $(".bigImg").attr("src", `images/loupe-big/big_${index + 1}.jpg`)

            //换字
            let $dataList = ["棉花糖白", "幼砂杏S", "沙漠绿", "花瓣紫实样色"]
            $(".tipsColor").html($dataList[index]);
        })
    })

    //尺寸选择模块
    $(".chooseSize a").click(function () {
        $(".chooseSize .tabmenu").show();
    })
    $(".chooseSize a").mouseleave(function () {
        $(".chooseSize .tabmenu").hide();
    })

    //尺码选择
    // console.log($(".attr-choiceSize").find(".item"));
    $(".attr-choiceSize").find(".item").each((index, el) => {
        $(el).on("click", function () {
            $(el).addClass("biankuang").siblings().removeClass("biankuang");
            $(el).children().show();
            $(el).siblings().children().hide();
        })
    })

    //联系客服
    $(".line1-btn").children().eq(1).on("click", function () {
        $(".showBox").show();
        $(".showBox-close").click(function () {
            $(".showBox").hide();
        })
        $(".cancel").click(function () {
            $(".showBox").hide();
        })
        $(".confirm").click(function () {
            window.location.replace("../login.html");
        })
    })



    //图片延迟加载
    $("img.lazy").lazyload({ effect: "fadeIn" });

    //tab栏切换
    // console.log($(".tab-nav").find(".tab-items"));
    $(".tab-nav").find(".tab-items").each((index, el) => {
        //底部的top值数组
        let topList = [6960, 1330, 1830];
        $(el).on("click", function () {
            $(el).addClass("active").siblings().removeClass("active");
            // console.log(index);
            // console.log($(".inner-right").find(".content-change").eq(index));
            $(".inner-right").find(".content-change").eq(index).addClass("show").siblings().removeClass("show")
            $(".con-dibu").css("top", topList[index]);
            // console.log($(".con-dibu").css("top"));
        })
    })

    //商品评价区域点击小圆圈切换
    // console.log($(".goods-comment").find("label"));
    $(".goods-comment").find("label").each((index, el) => {
        $(el).click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            $(".items.active").find(".icon-zhengpinbaozhangduigou").show();
            // console.log($(".list").find(".neirong"));
            $(".list").find(".neirong").eq(index).addClass("show").siblings().removeClass("show");

        })
    })
})


//固定导航栏
$(function () {
    $(window).on("scroll", function () {
        //不可见区域的高度
        let $invisibleHei = $(window).scrollTop();
        // console.log($invisibleHei);
        //tab栏距离body的距离
        let $selfHei = $(".tabChange").offset().top;
        // console.log($selfHei);
        if ($invisibleHei >= $selfHei) {
            $(".fixNav").show();
        } else {
            $(".fixNav").hide();
        }
    })
    //给固定导航栏里的三个tab-items绑定点击事件
    $(".fixNav").find(".tab-items").each((index, el) => {
        //底部的top值数组
        let topList = [6960, 1330, 1830];
        $(el).click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            $(".inner-right .tab-nav").find(".tab-items").eq(index).addClass("active").siblings().removeClass("active");
            $(".inner-right").find(".content-change").eq(index).addClass("show").siblings().removeClass("show")
            $(".con-dibu").css("top", topList[index]);
            $("html,body").animate({ scrollTop: 884 }, function () {
                $("html,body").animate({ scrollTop: 885 }, function () {
                    $(".fixNav").hide();
                }).stop(false, true);
            });
            $(window).scroll(function () {
                //不可见区域的高度>导航栏的高度就显示
                if ($(window).scrollTop() > 48) {
                    $(".fixNav").show();
                } else {
                    $(".fixNav").hide();
                }
                //不可见区域的高度
                let $invisibleHei = $(window).scrollTop();
                // console.log($invisibleHei);
                //tab栏距离body的距离
                let $selfHei = $(".tabChange").offset().top;
                // console.log($selfHei);
                if ($invisibleHei >= $selfHei) {
                    $(".fixNav").show();
                } else {
                    $(".fixNav").hide();
                }
            })
        })
    })
    //点击选择属性，回到顶部
    $(".fixNav").find(".btn-choose").click(function () {
        $("html,body").animate({ scrollTop: 0 });
    })
    //点击尺码选择助手滚动到尺码
    console.log($(".chooseSize").find(".chima"));
    $(".chooseSize").find(".chima").click(function () {
        $("html,body").animate({ scrollTop: 2600 });
    })
})

//购买数量
$(function () {
    // console.log($(".add-sub .sub"));
    // 减减--
    $(".add-sub .sub").click(function () {
        let $value = $(".calcBox").find("input").val();
        console.log(111);
        if ($value <= 1) {
            // $(".add-sub .sub").off("click");
            $(".add-sub .sub").css("color", "#ccc");
            return;
        }
        $(".calcBox").find("input").val(--$value);
    })
    // 加加++
    $(".add-sub .add").click(function () {
        let $value = $(".calcBox").find("input").val();
        $(".calcBox").find("input").val(++$value);
        $(".add-sub .sub").css("color", "#333");
    })

})

//头部在登录之后变成电话
$(function () {
    // console.log(JSON.parse(localStorage.getItem("userInfo")).uPhone);
    if (!(JSON.parse(localStorage.getItem("userInfo")))) {
        return
    }
    let data = JSON.parse(localStorage.getItem("userInfo") || "{}");
    $(".loginAfter").find(".username").text("M" + data.uPhone);
    $(".loginBef").hide();//你好 注册 隐藏
    $(".loginAfter").show();//你好 M15234197057 显示
    $(".exit").click(function () {
        localStorage.clear("userInfo");
        //3.头部你好变回原来内容
        $(".loginBef").show();
        $(".loginAfter").hide();
    })

})


//详情页将放大镜中的中区域图片和大区域图片，名称，价格切换成各自商品的
$(function () {
    let gPruduction;
    //http://localhost:8080/2.details.html?pid=1
    //location.search===>?pid=1
    let id = location.search.split("?")[1].split("=")[1];
    console.log(id);
    $.ajax({
        url: `./prodInfo/${id}`
    }).done(function (res) {
        console.log(res);
        $(".middleImg").find("img").attr("src", res.data.img);
        $(".bigImg").attr("src", res.data.img);
        $(".loupe-right").find("h1").text(res.data.pname);
        $(".rule-box ").find(".price-sales span").text(res.data.pprice);
        gPruduction = res.data;
        console.log(gPruduction);
    })



    //判断颜色和尺寸是否都选择了
    let colorFlag = false;//表示颜色未选择
    let sizeFlag = false;//表示尺码未选择
    let color = $(".attr-choice ").find("li");
    let size = $(".attr-choiceSize").find("span")
    for (var i = 0; i < color.length; i++) {
        color[i].onclick = function () {
            console.log(3333);
            colorFlag = true;
            console.log(colorFlag);
        }
    }
    for (var i = 0; i < size.length; i++) {
        size[i].onclick = function () {
            console.log(4444);
            sizeFlag = true;
            console.log(sizeFlag);
        }
    }
    //加入购物车
    $(".sales-btn").children().eq(1).on("click", function () {
        console.log(2222);
        //先判断用户是否是登陆状态即查看localStorage是否有数据
        if (!(JSON.parse(localStorage.getItem("userInfo")))) {
            $(".showBox").show();
            return;
        }
        console.log(colorFlag);
        console.log(sizeFlag);
        // 表示有其一未选择就不能加入购物车
        if (colorFlag == false || sizeFlag == false) {
            layer.msg("请选择颜色尺码");
            return;
        }

        if (colorFlag && sizeFlag) {
            $(".buycar").show();
        }
        let data = ({
            uId: JSON.parse(localStorage.getItem("userInfo")).uId,//购买人id
            pnum: $(".calcBox").find("input").val(),
            psize: $(".attr-choiceSize").find(".biankuang ").text(),
            pcolor: $(".colorBox ").find(".tips").text(),
            pname: $(".loupe-right").find("h1").text(),
            pprice: $(".rule-box ").find(".price-sales span").text(),
            img: $(".middleImg").find("img").attr("src"),
            pId: location.search.split("?")[1].split("=")[1]
        });
        console.log(data.pId);
        $.ajax({
            url: "./AddCarts",
            type: "post",
            data
        }).done(function (res) {
            console.log(res);
            // console.log(data.pnum);
            $(".car-box").find("i").text(data.pnum);
            $(".buycar").find(".go").click(function () {
                console.log(4444);
                $(".showBox").hide();
                location = "../index.html"
            })
            $(".buycar").find(".jiesuan").click(function () {
                console.log(53);
                location = "../5.buycar.html";
            })

        })


    })


    //购物袋的数字和选择的数量一致
    //判断当为0时 清空中间的商品展示
    $(".car-box").on("click", function () {
        // console.log(000);
        // let zhi = $(".car-box").find("i").text($(".calcBox").find("input").val());
        console.log($(".car-box").find("i").text());
        if ($(".car-box").find("i").text() == 0) {
            console.log($(".car-box").find("i").text());
            location = "../5.buycar.html";
            //空购物车显示
            $(".empty-cart").css({
                "visibility": "visible",
            });
            $(".goods-browser").css("marginTop", "316px")
            $(".cart-goods-title").hide();
            $(".cart-goods-box").hide();
            $(".cart-btn").hide();
        } else {
            $(".cart-goods-title").show();
            $(".cart-goods-box").show();
            $(".cart-btn").show();
        }
    })

})





